<template>
  <div style="margin-top: 10px">
    <FlashTitle  :title="title+'直通率'"
                 :show-left="false"
                 :show-right="false"
                 >
    </FlashTitle>
    <Echart
            :options="options"
            id="bottomLeftChart"
            height="200px"
            :width=width
    ></Echart>
  </div>
</template>

<script>
  import Echart from '@/common/echart'
  const labelOption = {
    show: true,
    //position:'insideBottom',
    position:'insideTop',
    distance: 40,
    align: 'center',
    verticalAlign:'middle',
    rotate: 90,
    color:'white',
    //formatter: '{a}  {c}%',
    formatter: '{c}%',
    fontSize: 16,
    rich: {
      name: {}
    }
  };
  export default {
    data () {
      return {
        options: {},
      };
    },
    components: {
      Echart,
    },
    props: {
      cdata: {

      },
      width:{type:String,default:'100%'},
      title:{type:String},
      showValue:{
        type:Boolean,
        default:true
      }
    },
    watch: {
      showValue:{
        handler(newValue){
          labelOption.show=newValue
        },
        immediate: true
      },
      cdata: {
        handler (newData) {
          let labels=[]
          let data=[]
          if (newData&&newData.length>0){
            newData.forEach(i=>{
              labels.push(i.name)
              data.push(i.value)
            })
          }

          this.options = {

            tooltip: {
              trigger: "axis",
              backgroundColor: "rgba(255,255,255,0.1)",
              axisPointer: {
                type: "shadow",
                label: {
                  show: true,
                  backgroundColor: "#7B7DDC"
                }
              },

              /*formatter:function (parms){
                console.log(parms)
                var str = parms.marker;
                for (const i in parms) {
                  let param=parms[i]
                  str=str+param.seriesName+"</br>"+
                      "直通率："+ param.data+"%";
                }
                return  str ;
              }*/
            },
            legend: {
              data: ["直通率","直通率趋势"],
              textStyle: {
                color: "#9eeacc"
              },

            },
            grid: {
              x: "8%",
              width: "88%",
              y: "11%"
            },
            xAxis: {
              data: labels,

              type: 'category',
            },
            yAxis: [
              {
                splitLine: { show: false },
                min: 70,
                axisLine: {
                  lineStyle: {
                    color: "#9eeacc"
                  }
                },

                axisLabel: {
                  formatter: "{value}% ",
                  color: "#9eeacc"
                }
              }/*,
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisLabel: {
                formatter: "{value} "
              }
            }*/
            ],
            series: [
              {
                name: "直通率趋势",
                type: "line",
                smooth: true,
                showAllSymbol: true,
                symbol: "emptyCircle",
                symbolSize: 8,
                /*yAxisIndex: 1,*/
                itemStyle: {
                  normal: {
                    color: "#F02FC2"
                  }
                },
                data: data
              },
              {
                name: "直通率",
                type: "bar",
                barWidth: 27,
                label:labelOption,
                itemStyle: {
                  normal: {
                    barBorderRadius: 5,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#956FD4" },
                      { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                      { offset: 1, color: "#3EACE5" }
                    ])
                  }
                },
                data: data
              }

            ]
          }
        },
        immediate: true,
        deep: true
      },
    },
  }

</script>

<style lang="scss" scoped>
$box-height: 100%;
$box-width: 100%;
</style>
